<template>
  <div class="body">
    <div class="bod_div">
      <div class="bod_title">开户</div>
      <div class="bod_one">
        <span class="bod_in_font">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
        <el-input class="bod_inp1" v-model="param.username" placeholder="请输入用账号"></el-input>
      </div>
      <div class="bod_one">
        <span class="bod_in_font">手&nbsp;机&nbsp;号：</span>
        <el-input class="bod_inp1" v-model="param.mobile" placeholder="请输入手机号"></el-input>
      </div>

      <div class="bod_one">
        <span class="bod_in_font">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
        <el-input class="bod_inp1" type="password" v-model="param.password" placeholder="请输入密码"></el-input>
      </div>
      <div class="bod_one">
        <span class="bod_in_font">确认密码：</span>
        <el-input class="bod_inp1" type="password" v-model="param.password_repetition" placeholder="请输入内容"></el-input>
      </div>
      <!-- <div class="bod_one">
        <span class="bod_in_font">代理账号：</span>
        <el-input class="bod_inp1" v-model="param.pid" placeholder="请输入内容"></el-input>
      </div>

      <div class="bod_one">
                  <span class="bod_in_font">真实地址：</span>
                  <el-input class="bod_inp1" v-model="param.real_address" placeholder="请输入内容"></el-input>
             </div> -->
      <!-- <div class="bod_one">
                  <span class="bod_in_font">身份证号：</span>
                  <el-input class="bod_inp1" v-model="param.card_no" placeholder="请输入内容"></el-input>
             </div> -->
      <div class="bott_b"><el-button @click="Submission()" class="bott_ty" type="primary">提交</el-button></div>
      <div class="logincla" @click="offlog">立即登录</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: {
        mobile: '',
        username: '',//用户名
        password: '', //密码
        password_repetition: '', //确认密码
        pid: 1, //代理代码
        group: 'app'
      }
    };
  },
  methods: {
    Submission() {
      //提交
      var that = this;
      if (that.param.username == '') {
        return that.$notify.error('请输入用户名！');
      }
      if (that.param.mobile == '') {
        return that.$notify.error('请输入手机号！');
      }
      if (that.param.password == '') {
        return that.$notify.error('请输入密码！');
      }
      if (that.param.password.length < 6) {
        return that.$notify.error('密码不能少于六位！');
      }
      if (that.param.password_repetition == '') {
        return that.$notify.error('请再次输入密码！');
      }
      if (that.param.password !== that.param.password_repetition) {
        return that.$notify.error('两次密码输入不一致！');
      }
      this.$post('v1/site/register', this.param).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.$notify.success('注册成功请登录！');
          this.param.mobile = '';
          this.param.username = '';
          this.param.password = '';
          this.param.password_repetition = '';
          that.$router.push({
            path: '/'
          });
        } else {
          return that.$notify.error(res.message);
        }
      });
    },
    /* 返回登录*/
    offlog() {
      var that = this;
      that.$router.push({
        path: '/'
      });
    }
  }
};
</script>

<style scoped>
.body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background-image: url(../assets/bg3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.bod_div {
  width: 700px;
  height: 500px;
  margin-top: 110px;
  background-color: #ffffff;
}
.bod_title {
  width: 100%;
  height: 90px;
  line-height: 90px;
  font-size: 35px;
  font-weight: 400;
  color: #333333;
  padding-left: 20px;
  box-sizing: border-box;
}
.bod_one {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.bod_in_font {
  font-size: 20px;
  color: #333333;
  margin-right: 15px;
}
.bod_inp1 {
  width: 400px;
}

.bott_b {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.bott_ty {
  width: 200px;
  height: 45px;
}
.logincla {
  cursor: pointer;
  font-size: 18px;
  color: #00a2e8;
  text-decoration: underline;
  float: right;
  margin-right: 50px;
}
</style>
